<script setup lang="ts">
import { Waterfall } from "vue-waterfall-plugin-next";
import "vue-waterfall-plugin-next/dist/style.css";
import { nanoid } from "nanoid";
import { useWindowSize } from "@vant/use";
withDefaults(
  defineProps<{
    list?: any[];
  }>(),
  {
    list: () => []
  }
);
const waterfallRef = ref<any>(null);
const emit = defineEmits(["clickItem"]);
const key = ref(nanoid(16));
onActivated(() => {
  key.value = nanoid(16);
  setTimeout(() => {
    unref(waterfallRef)?.renderer();
  }, 2000);
});

const clickItem = (item: any) => {
  emit("clickItem", item);
};
const { width } = useWindowSize();
</script>

<template>
  <Waterfall
    ref="waterfallRef"
    :list="list"
    :gutter="16"
    :hasAroundGutter="true"
    :animationCancel="true"
    :lazyload="true"
    :breakpoints="{
      [width]: { rowPerView: 2 }
    }"
  >
    <!-- 新版插槽数据获取 -->
    <template #default="{ item, url }">
      <div :class="['card']" @click="clickItem(item)">
        <van-image
          :src="url"
          :width="item.imgWidth"
          :height="item.imgHeight"
          :class="['relative', item.type == 'video' ? 'video-card' : '']"
          @load="item.type == 'video' && (item.loaded = true)"
          fit="cover"
        >
          <div
            class="absolute top-50% left-50% translate-[-50%]"
            v-if="item.type == 'video' && item.loaded"
          >
            <svg-icon class="text-30" name="play" />
          </div>
        </van-image>
        <div class="py-6 px-4">
          <div
            class="text-[#444] text-12 line-height-14 font-400 text-ellipsis-2"
          >
            {{ item.title }}
          </div>
          <div class="text-[#999] text-10 line-height-12 mt-4 h-16 truncate">
            {{ item.time }} . <span>{{ item.author }}</span>
          </div>
        </div>
      </div>
    </template>
  </Waterfall>
</template>

<style lang="scss" scoped>
.card {
  background: #ffffff;
  box-shadow: 0px 2px 5px 1px rgba(159, 159, 159, 0.23);
  border-radius: 8px 8px 8px 8px;
  :deep(.van-image__img) {
    border-radius: 8px 8px 0px 0px;
  }
  .video-card {
    :deep(img) {
      min-height: 120px;
    }
    color: red;
    &:has(.van-image__error) {
      height: 120px !important;
    }
  }
}
</style>
